<template>
  <el-dialog
    top="80px"
    :visible.sync="isVisible"
    :title="title"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <el-container>
      <el-main :style="{ 'max-height': maxHeightDialog }">
        <div style="margin-top: 10px">
          <el-table
            ref="elTable"
            v-loading="loading"
            border
            fit
            size="medium "
            :data="dataList"
            style="width: 100%"
          >
            <el-table-column
              align="center"
              type="index"
              width="50"
              fixed
              label="#"
              :index="indexMethod"
            />

            <el-table-column align="center" label="姓名" prop="personName" />
            <!-- <el-table-column align="center" label="场所名称" prop="placeName" /> -->

            <el-table-column
              align="center"
              label="设备序列号"
              prop="deviceSn"
            />
            <el-table-column
              align="center"
              label="设备名称"
              prop="deviceName"
            />
            <el-table-column
              align="center"
              label="设备类型"
              prop="manufactureType"
            />
            <el-table-column align="center" label="下发结果" prop="result">
              <template slot-scope="{ row }">
                <el-tag
                  size="medium"
                  :type="row.failureFlag == 0 ? 'success' : 'warning'"
                >
                  {{ row.failureFlag == 0 ? '成功' : '失败' }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="下发时间"
              prop="createTime"
            />
          </el-table>
          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="pagination.pageNum"
            :limit.sync="pagination.pageSize"
            :page-sizes="pageSizeOptions"
            @pagination="getDataList"
          />
        </div>
      </el-main>
      <el-footer>
        <el-button
          size="medium"
          icon="el-icon-close"
          style="width: 120px"
          @click="isVisible = false"
        >
          关闭
        </el-button>
      </el-footer>
    </el-container>
  </el-dialog>
</template>

<script>
import dataTableMixins from '@/mixins/data-table-mixins'
import Pagination from '@/components/Pagination'
import EpidemicPreventionManageApi from '@/api/epidemic-prevention-manage'
export default {
  name: 'PersonnelDistributionRecords',
  components: {
    Pagination,
  },
  mixins: [dataTableMixins],
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '',
    },
    item: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },
  data() {
    return {
      deviceList: [],
    }
  },
  computed: {
    isVisible: {
      get() {
        return this.dialogVisible
      },
      set() {
        this.toClose()
      },
    },
  },
  mounted() {
    this.getPlaceList()
  },
  methods: {
    toClose() {
      this.$emit('close')
    },
    getPlaceList() {
      EpidemicPreventionManageApi.getAllPlaces()
        .then((res) => {
          if (res.data.code == 200) {
            this.placeList = res.data.data
          }
          this.getDeviceList()
        })
        .catch((err) => {
          this.getDeviceList()
        })
    },
    getDeviceList() {
      EpidemicPreventionManageApi.getAllDevice()
        .then((ret) => {
          this.deviceList = ret.data.data
          this.deviceList.forEach((ele) => {
            this.placeList.forEach((item) => {
              if (ele.placeId == item.id) {
                ele.placeName = item.placeName
              }
            })
          })

          this.getDataList()
        })
        .catch((err) => {
          this.getDataList()
        })
    },
    getDataList() {
      this.loading = true
      const searchModel = {
        personIdNumber: this.item.item.sfzh,
      }
      EpidemicPreventionManageApi.getFaceIssueLogList({
        ...this.pagination,
        ...searchModel,
        ...this.sort,
      })
        .then((res) => {
          if (res.data.code == 200) {
            this.dataList = res.data.data.rows
            this.dataList.forEach((ele) => {
              this.deviceList.forEach((item) => {
                if (ele.deviceId == item.id || ele.deviceId == item.sn) {
                  ele.deviceName = item.deviceName
                  ele.placeName = item.placeName
                  ele.deviceSn = item.sn
                }
              })
            })

            console.log(' this.dataList=', this.dataList)

            this.total = res.data.data.total
            this.loading = false
          }
        })
        .catch(() => {
          this.loading = false
          this.dataList = []
          this.total = 0
        })
    },
    indexMethod(index) {
      return this.formatIndex(index, this.pagination)
    },
  },
}
</script>

<style scoped lang="scss">
@import '../../../../../styles/part-custom';
</style>
